<template>
  <div class="whole">
    <el-form
      inline
      ref="searchForm"
      class="searchForm"
      :model="searchForm"
      :rules="rules"
      label-position="right"
      label-width="100px"
    >
      <el-form-item prop="pageNum" label="查看页数：">
        <el-input v-model.number="searchForm.pageNum"> </el-input>
      </el-form-item>

      <el-form-item prop="pageSize" label="每页条目数：">
        <el-input v-model="searchForm.pageSize"> </el-input>
      </el-form-item>

      <el-form-item>
        <el-button
          type="primary"
          icon="el-icon-edit"
          @click="queryByCondition()"
          >查询
        </el-button>
        <el-button
          type="warning"
          icon="el-icon-remove"
          @click="() => $refs.searchForm.resetFields()"
          >重置
        </el-button>
      </el-form-item>
    </el-form>
    <el-table :data="results" class="resultsTable" stripe>
      <el-table-column prop="personId" label="ID"></el-table-column>
      <el-table-column prop="name" label="姓名"></el-table-column>
      <el-table-column prop="age" label="年龄" :formatter="formatAge">
      </el-table-column>
      <el-table-column prop="male" label="性别">
        <template slot-scope="props">
          <span>{{ sex(props.row.male) }}</span>
        </template>
      </el-table-column>
      <el-table-column width="180px" fixed="left">
        <template slot-scope="props">
          <el-button
            class="el-button--mini" type="warning" icon="el-icon-edit"
            @click="openById(props.row.personId)">编辑</el-button
          >
          <el-button class="el-button--mini" type="danger" icon="el-icon-edit"
            @click="delete(props.row.personId)">删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!--    <el-pagination-->
    <!--    :page-size="searchForm.pageSize"-->
    <!--    :current-page="searchForm.pageNum"></el-pagination>-->
  </div>
</template>

<script>
// import New from './components/New.vue';
const sexTypes = [
  {
    text: "男性",
    value: true,
    index: 1,
  },
  {
    text: "女性",
    value: false,
    index: 2,
  },
];
export default {
  name: "Third",
  components: {
    // New,Old,
  },
  props: {
    sampleP: {
      type: Number,
      default: 0,
    },
  },
  data() {
    return {
      sampleD: "value",
      /*
      * [
  {
    "personId": 1,
    "name": "王七",
    "age": 10,
    "male": true
  },
  {
    "personId": 2,
    "name": "王五",
    "age": 12,
    "male": true
  },*/

      results: [
        {
          personId: 999,
          name: "前端测试数据1",
          age: 10,
          male: true,
        },
        {
          personId: 998,
          name: "前端测试数据2",
          age: 12,
          male: false,
        },
      ],
      searchForm: {
        pageNum: 1,
        pageSize: 6,
      },
    };
  },
  computed: {
    // sampleC() {
    //     return this.sampleD+'--';
    // }

  },
  created() {},
  mounted() {
    this.queryByCondition();
  },
  methods: {
    sampleM() {},
    sex(male) {
      return sexTypes.filter((x) => x.value === male)[0].text;

      // return c[0].text
    },
    openById(id) {
      console.log("id ", id);
    },
    queryByCondition(pageNum) {
      if (pageNum) this.searchForm.pageNum = pageNum;
      this.$http({
        method: "post",
        url: "/queryPersons",
        data: this.searchForm,
      }).then(
        (res) => {
          // this.$message.warning(JSON.stringify(res.data));
          this.results = res.data;
          //this.total = res.data.total;
          //this.newsResults = res.data.results;
        },
        (error) => {
          console.log(error.response.status);
        }
      );
    },
    formatAge(row){
      return row.age+".00";
    }
  },
  watch: {
    // sampleC(newValue, oldValue) {
    //
    // }
  },
};
</script>

<style scoped>
/*<style lang='scss' scoped>*/
.whole {
  background-color: rgba(208, 168, 15, 0.71);
  display: flex;
  justify-content: center;
  flex-direction: column;
}
.resultsTable {
  flex: 0.8;
}
.searchForm {
  flex: 0.2;
}
</style>
